<template>
	<view class="search">
		<view class="box">
			<uni-search-bar @confirm="myconfirm" v-model="key" @input="searchinput" :focus="true" cancelButton="none" :radius="40"></uni-search-bar>
		</view>
		<!-- 搜索建议列表 -->
		<view class="searchList">
			<view class="item" @click="toDetail(item.goods_id)" v-for="(item , index ) in searchList" :key="index">
				<view class="left">
					{{item.goods_name}}
				</view>
				<uni-icons type="right"  size="16"></uni-icons>
			</view>
			
		</view>
		<!-- 搜索历史 -->
		<view class="history">
			<view class="top">
				<view>搜素历史</view>
				<uni-icons @click="clearHistory" type="trash" size="16"></uni-icons>
			</view>
			<view class="bottom">
				<view @click="toList(item)" class="item" v-for="(item , index) in historyList" :key="index">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 定义一个定时器
				timer:null,
				// 搜索建议列表
				searchList:[],
				// 搜索框关键字
				key:'',
				// 搜索历史数据
			    historyList: []
				
			};
		},
		onLoad () {
		  // 获取本地的搜索历史数据
		  this.historyList = uni.getStorageSync('history') || []
		},
		methods:{
			// 在搜索框中输入内容时，会触发这个事件
			searchinput(e){
				// 清除定时器
				clearTimeout(this.timer)
				// 如果关键字e为空，不发请求
				if (e.trim() === '') return
				// 重新设置定时器
				this.timer = setTimeout(async() => {
					const {
						data:res
					} = await uni.$http.get(`/api/public/v1/goods/search?query=${e}`)
					if (res.meta.status !== 200 ) return uni.$showMsg()
					this.searchList = res.message.goods
				},300)
			},
			// 点击跳转到商品详情页面
			toDetail(good_id){
				// 清空关键字
				this.key = ''
				// 清空搜索建议列表
				this.searchList = []
				
				uni.navigateTo({
					url:`/pages/goods_detail/main?goods_id=${good_id}`
				})
			},
			// 跳转到商品列表页面
			toList(item){
				uni.navigateTo({
					url:`/pages/list/list?key=${item}`
				})
			},
			// 在输入框中点击回车时触发事件
			myconfirm(){
				uni.navigateTo({
					url:`/pages/list/list?key=${this.key}`
				})
				// 将搜索关键字保存起来
				this.historyList.unshift(this.key)
				// 将重复的关键字去除
				this.historyList = [...new Set(this.historyList)]
				// 将搜索关键字保存到本地
			    uni.setStorageSync('history', this.historyList)
				// 清除页面的数据源
				this.key = ''
				this.searchList = []
			},
			clearHistory(){
				uni.showModal({
					title:'警告',
					content:'是否删除用户信息',
					success: res => {
						// 判断是否点击确定
						if(res.confirm){
							this.historyList = []
							uni.removeStorageSync('history')
						}
						
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.search{
		
		.box{
			position: sticky;
			background-color: #c00000;
			top:0;
			left: 0;
		}
		
		.searchList{
			font-size: 12px;
			.item{
				display: flex;
				justify-content: space-between;
				line-height: 60rpx;
				border-bottom:1px solid #f5f5f5 ;
				
				.left{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		.history{
			.top{
				font-size: 14px;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f4f4f4;
				padding: 20rpx 10rpx;
			}
			.bottom{
				display: flex;
				flex-wrap: wrap;
				.item{
					padding: 10rpx 20rpx;
					margin: 10rpx 20rpx;
					background-color: #ccc;
					border-radius: 20rpx;
				}
			}
		}
	}

</style>
